<template>
    <div class="person-content">
        <div class="content-box">
            <h3>修改密码</h3>
            <form @submit.prevent="onSubmit()">
                <div class="mt32">
                    <label>当前密码</label>
                    <input type="password" placeholder="请输入当前密码">
                </div>
                <div class="mt32">
                    <label>新密码</label>
                    <input type="password" placeholder="请输入新密码">
                </div>
                <div class="mt32">
                    <label>确认密码</label>
                    <input type="password" placeholder="请确认密码">
                </div>
                <div class="submit mt56">
                    <button class="blue" @submit="onSubmit">保存</button>
                    <button class="cancel-button" type="button" @click="cancle">取消</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
export default {
    name: "change-password",
    methods: {
        onSubmit() {
            this.$message({
                type: 'success',
                message: '保存成功!'
            })
        },
        cancle() {
            this.$message({
                type: 'warning',
                message: '已取消!'
            })
        }
    }
};
</script>

<style scoped>
@import "../../assets/css/person.css";
.person-content {
    height: calc(100vh - 59px);
}
label {
    display: inline-block;
    width: 70px;
    font-size: 14px;
    color:#6f83a1;
}
input {
    width: 396px;
    height: 32px;
    border:1px solid #d3d9e2;
    border-radius:2px;
    outline: none;
    padding-left: 16px;
    font-style: 14px;
}
.mt56 {
    margin-top: 56px;
}
</style>
